<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="all">
    <meta name="author" content="Tencent-CP">
    <meta name="Copyright" content="Tencent">
    <meta name="description"
          content=""/>
    <meta name="keywords"
          content=""/>
    <title>职业</title>
    <link rel="stylesheet" type="text/css" href="Public/Static/Lol/css/index.css"/>
    <link rel="stylesheet" href="Public/Plug/layui/css/layui.css"   media="all">
</head>
<style>
    body, dl, dd, ul, ol, h1, h2, h3, h4, h5, h6, p, form {
        margin: 0; }

    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        padding: 0;
        margin: 0; }


    em, b {
        font-style: normal; }

    a {
        text-decoration: none; }

    img {
        border: 0; }

    button, input, select, textarea {
        font-size: 100%;
        outline: none; }

    table {
        border-collapse: collapse;
        border-spacing: 0; }

    td, th, ul, ol {
        padding: 0;
        list-style: none; }

    body {
        background-color: #431f8c;
        font-family: "Microsoft YaHei" !important; }

    .clearfix:after {
        content: " ";
        clear: both;
        height: 0;
        visibility: hidden;
        display: block; }

    .clearfix {
        *zoom: 1; }

    .hide {
        height: 0;
        line-height: 0;
        font-size: 0;
        visibility: hidden;
        display: none; }

    body, #ost_box, #footer_ied, .body-box {
        min-width: 1200px;
        width: 100%;
        _width: expression((document.documentElement.clientWidth||document.body.clientWidth)<1202?'1200px':''); }

    /*footer*/
    #footer_ied {
        margin-top: -110px;
        z-index: 999;
        position: relative;
        background: #431f8c; }

    .wrap_ied {
        font: 12px verdana;
        text-align: center;
        padding: 30px 0; }

    .wrap_ied, .wrap_ied a {
        color: #fff; }

    .wrap_ied .e {
        font-size: 10px;
        padding: 3px 0;
        -webkit-text-size-adjust: none; }

    * {
        box-sizing: border-box; }

    .main {
        width: 100%;
        margin: 0 auto;
        background: #fff;
        padding: 20px 20px 0; }
    .main .top {
        width: 100%;
        display: flex;
        flex-wrap: wrap; }
    .main .top li {
        width: 90px;
        height: 110px!important;
        margin-bottom: 10px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        align-content: center;
    }
    .main .top li img{
        display: block;
        width: 80px;
        height: 80px;
    }
    .main .top li p{
        width: 100%;
        height: 20px;
        text-align: center;
        margin: 4px 0;
    }

    .main .status {
        width: 100%; }
    .main .status1 .item {
        width: 100%;
        margin-bottom: 10px; }
    .main .status1 p {
        text-align: left;
        line-height: 24px;
        color: #000;
        float: left; }
    .main .status1 .p1 {
        width: 100px;
        height: 24px; }
    li.active {
        border: 4px solid red;
    }
</style>
<body style="background: #fff;">
<blockquote class="layui-elem-quote">
    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
        搜索名称：
        <div class="layui-inline">
            <input class="layui-input" name="keywords" value="">
        </div>
        <button class="layui-btn btn-search-form" data-type="button">搜索</button>
        <button class="layui-btn layui-btn-primary job-add">添加</button>
    </div>
</blockquote>
{if !empty($jobs)}
<div class="main">
    <ul id="job" class="top">
        {foreach $jobs as $val}
        <li class="job-item" data-jobid="{$val.jobId}">
            <img src="https://game.gtimg.cn/images/lol/act/img/tft/classes/{$val.alias}" alt="">

            <p>{$val.name}</p>
        </li>
        {/foreach}


    </ul>

    <div class="status status2" style="display: block;">
        <form id="job-form" class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">TFTID</label>
                    <div class="layui-input-inline">
                        <input type="number" name="TFTID"  class="layui-input">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">职业ID</label>
                <div class="layui-input-block">
                    <span name="jobIdShow" class="layui-input"></span>
                    <input type="hidden" name="jobId" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">职业名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入职业名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">职业英文名称</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" lay-verify="title" autocomplete="off" placeholder="请输入职业英文名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">职业效果ID</label>
                <div class="layui-input-block">
                    <input type="number" name="traitId" lay-verify="title" autocomplete="off" placeholder="请输入职业效果ID" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">职业效果简介</label>
                <div class="layui-input-block">
                    <textarea name="introduce" placeholder="请输入职业效果简介" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">触发等级</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="level_key[]" value="1" title="1"  >
                    <input type="checkbox" name="level_key[]" value="2" title="2">
                    <input type="checkbox" name="level_key[]" value="3" title="3">
                    <input type="checkbox" name="level_key[]" value="4" title="4">
                    <input type="checkbox" name="level_key[]" value="5" title="5">
                    <input type="checkbox" name="level_key[]" value="6" title="6">
                    <input type="checkbox" name="level_key[]" value="7" title="7">
                    <input type="checkbox" name="level_key[]" value="8" title="8">
                    <input type="checkbox" name="level_key[]" value="9" title="9">
                </div>
            </div>
            <div id="level_names">
                <div class="level_name_1 layui-form-item layui-form-text" style="display: none">
                    <label class="layui-form-label">技能描述(等级1)</label>
                    <div class="layui-input-block">
                        <textarea name="level_name[]" placeholder="技能描述(等级1)" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="level_name_2 layui-form-item layui-form-text" style="display: none">
                    <label class="layui-form-label">技能描述(等级2)</label>
                    <div class="layui-input-block">
                        <textarea name="level_name[]" placeholder="技能描述(等级2)" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="level_name_3 layui-form-item layui-form-text" style="display: none">
                    <label class="layui-form-label">技能描述(等级3)</label>
                    <div class="layui-input-block">
                        <textarea name="level_name[]" placeholder="技能描述(等级3)" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="level_name_4 layui-form-item layui-form-text" style="display: none">
                    <label class="layui-form-label">技能描述(等级4)</label>
                    <div class="layui-input-block">
                        <textarea name="level_name[]" placeholder="技能描述(等级4)" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="level_name_5 layui-form-item layui-form-text" style="display: none">
                    <label class="layui-form-label">技能描述(等级5)</label>
                    <div class="layui-input-block">
                        <textarea name="level_name[]" placeholder="技能描述(等级5)" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="level_name_6 layui-form-item layui-form-text" style="display: none">
                    <label class="layui-form-label">技能描述(等级6)</label>
                    <div class="layui-input-block">
                        <textarea name="level_name[]" placeholder="技能描述(等级6)" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="level_name_7 layui-form-item layui-form-text" style="display: none">
                    <label class="layui-form-label">技能描述(等级7)</label>
                    <div class="layui-input-block">
                        <textarea name="level_name[]" placeholder="技能描述(等级7)" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="level_name_8 layui-form-item layui-form-text" style="display: none">
                    <label class="layui-form-label">技能描述(等级8)</label>
                    <div class="layui-input-block">
                        <textarea name="level_name[]" placeholder="技能描述(等级8)" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="level_name_9 layui-form-item layui-form-text" style="display: none">
                    <label class="layui-form-label">技能描述(等级9)</label>
                    <div class="layui-input-block">
                        <textarea name="level_name[]" placeholder="技能描述(等级9)" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>

<!--            <button type="button" class="action-to-update layui-btn layui-btn-normal" style="margin-left: 110px;">编辑</button>-->
            <button type="button" class="action-to-submit layui-btn layui-btn-normal" style="margin-left: 110px; /*display: none*/">保存</button>
            <button type="button" class="action-to-delete layui-btn layui-btn-danger" style="margin-left: 110px;">删除</button>

        </form>
    </div>
</div>
{else}
<h2>暂无数据</h2>
{/if}
</body>

<!--引用插件-->
<script type="text/javascript" src="Public/Plug/layui/layui.all.js"></script>
<script type="text/javascript" src="Public/Plug/jquery/jquery-3.3.1.min.js"></script>
<script src="//ossweb-img.qq.com/images/js/comm/showDialog.min.js"></script>
<script src="Public/Static/Lol/js/job.js?v=5"></script>
</html>